<template>
<div class="orderList">
  <div class="order-list-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
    <div class="list-item-renter">
      <div class="renter-msg-left">
        <span>{{item.webUser && item.webUser.trueName}}&nbsp;</span>
        <span class="order-type order-type-renew" v-if="item.orderType === 2">续租</span><span class="order-type order-type-cancel" v-if="item.orderType === 3">退租</span>
        <span class="status">{{ transOrderStatus(item.status) }}</span>
      </div>
      <div class="renter-msg-button"><span>{{(new Date(item.createTime && item.createTime.replace(/-/g, '/'))).Format('yyyy-MM-dd h:m')}}</span><span>订单编号：{{item.orderCode}}</span></div>
    </div>
  </div>
  <no-data v-show="orderList[tabIdx].length === 0"><span slot="message">您还没有订单信息哦~</span></no-data>
</div>
</template>

<script>
import {Confirm, TransferDomDirective as TransferDom} from 'vux'
import houseList from '@/components/houseList'
import noData from '@/components/noData'
import contract from '@/components/contract'
export default {
  name: 'order-list',
  directives: {
    TransferDom
  },
  components: {
    houseList,
    noData,
    Confirm,
    contract
  },
  data () {
    return {
      tabIdx: 0,
      orderId: 0,
      orderStatus: '',
      orderList: {
        0: [], // 全部
        1: [], // 待确认
        2: [], // 待租客签约
        3: [], // 待租客支付
        4: [] // 已完成
      },
      showConfirm: false,
      orderInfo: {
        housePersons: {},
        landlord: {},
        order: {},
        render: {},
        apartment: {},
        romm: {},
        renter: {
          mobile: '',
          trueName: ''
        }
      },
      showDialog: false// 签约提示框
    }
  },
  props: {
  },
  created () {
    this.getData(this.tabIdx, '')
  },
  methods: {
    // 订单状态：1-待确认；3-待租客签约；4-待租客支付；5-已完成；99-已关闭
    getData (idx, status) {
      this.orderStatus = status
      this.$axiosGeting(this.$api.myOrderList, {
        page: '1',
        pageSize: '10',
        status,
        type: '2'
      }).then(json => {
        if (json.code === '0000' && json.data && json.data.length > 0) {
            // 处理公寓房源数据
          let orderList = json.data
          for (let x in orderList) {
            if (orderList[x].houseType === 2) {
              let apartment = orderList[x].apartment
              let room = orderList[x].room
              let housePerson = {
                id: apartment.id,
                coverImg: apartment.cover,
                houseTitle: room.buildingName + room.roomName,
                address: apartment.address,
                createTime: apartment.createTime,
                rentalPrice: orderList[x].money
              }
              orderList[x]['housePerson'] = housePerson
            }
          }
          this.orderList[idx] = orderList
        }
      })
    },
    onItemClick (index) {
      this.tabIdx = index
      if (this.orderList[index].length === 0) {
        switch (index) {
          // 全部
          case 0: this.getData(index, ''); break
          // 待确认
          case 1: this.getData(index, '1'); break
          // 待租客签约
          case 2: this.getData(index, '3'); break
          // 待租客付款
          case 3: this.getData(index, '4'); break
          // 已完成
          case 4: this.getData(index, '5'); break
        }
      }
    },
    // 同意
    agree (orderType, orderId) {
      // 订单类型：1-普通订单；2-续租订单；3-退租订单
      if (orderType === 2) {
        this.$router.push({ name: 'renewOrder', params: { orderId } })
      } else if (orderType === 3) {
        this.$router.push({ name: 'cancelOrder', params: { orderId } })
      } else {
        this.$router.push({ name: 'landlordOrderDetail', params: { orderId } })
      }
      this.showDialog = true
    },
    // 拒绝
    refuse (orderId) {
      this.showConfirm = true
      this.orderId = orderId
    },
    // 取消订单
    cancelOrder () {
      this.showConfirm = false
      this.$axiosPosting(this.$api.cancelOrder, {
        orderId: this.orderId
      }).then(json => {
        if (json.code === '0000') {
          this.$vux.toast.text('拒绝签约成功', 'middle', 15000)
          this.getData(this.tabIdx, this.orderStatus)
        }
      })
    },
    transOrderStatus (status) {
      let statusTxt = ''
      switch (status) {
        case 1: statusTxt = '待确认'; break
        case 3: statusTxt = '待租客签约'; break
        case 4: statusTxt = '待租客付款'; break
        case 5: statusTxt = '已完成'; break
        default: statusTxt = '已关闭'; break
      }
      return statusTxt
    },
    // @click.native="contactLandlor(item.webUser.id)" 联系租客
    contactLandlor (landlordId) {
      let virtualNum = ''
      let mobileTo = ''
      this.$axiosPosting(this.$api.getUserById, {userId: landlordId}).then(res => {
        if (res.code === '0000') {
          mobileTo = res.data.mobile
          step2()
        }
      })
      const step2 = () => {
        let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
        let mobileFor = userInfo ? userInfo.mobile : ''
        if (mobileFor) {
          if (virtualNum === '') {
            this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
              let data = ''
              if (res.code === '0000') {
                data = JSON.parse(res.data)
              }
              if (res.code === '0000' && data.errorCode === '0') {
                virtualNum = data.virtualNum
                window.location.href = `tel:${virtualNum}`
              } else {
                this.$vux.toast.text('无法获取房东电话')
                virtualNum = ''
              }
            })
          } else {
            window.location.href = `tel:${virtualNum}`
          }
        } else {
          this.$router.replace('/login')
        }
      }
    }
  }
}
</script>

<style lang="less">
  .orderList {
    // padding-top: 44px;
    // .vux-tab {
    //   position: fixed;
    //   top: 0;
    //   left: 0;
    //   right: 0;
    //   z-index: 99;
    //   .vux-tab-selected {
    //     border-bottom-style: solid;
    //   }
    // }
    .order-list {
      font-size: .8rem;
      background: #f4f4f4;
      .order-list-item {
        position: relative;
        margin-bottom: .3rem;
        background: #fff;
        border-bottom: 0.5px solid #f4f4f4;
        .list-item-renter {
          padding: .6rem .75rem;
          border-bottom: 0.5px solid #f4f4f4;
          .renter-msg-left {
            font-size: 15px;
            line-height: 24px;
            color: #000;
            .order-type {
              padding: 2px 6px;
              font-size: 10px;
              line-height: 1;
              color: #fff;
              background: #097dde;
              border-radius: 3px;
              vertical-align: 1px;
            }
            .order-type-cancel {
              background: #d4323f;
            }
            .status {
              float: right;
              font-size: .5rem;
              color: #777;
            }
          }
          .renter-msg-button {
            display: flex;
            font-size: 12px;
            line-height: 24px;
            color: #777;
            span {
              flex: 1 0 auto;
            }
            span:nth-of-type(2) {
              flex-grow: 0;
            }
          }
        }
        .btn-wrap {
          position: relative;
          padding: .5rem .75rem;
          font-size: 0;
          text-align: right;
          &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border-top: .5px solid #f4f4f4;
          }
          .weui-btn_mini {
            width: 3.5rem;
            margin-top: 0;
            margin-left: .5rem;
            padding: 0;
            font-size: 14px;
            line-height: 30px;
            color: #777;
            border-color: #777;
            border-radius: 3px;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .ui-house-li {
      padding: .75rem .75rem .75rem 0;
      .house {
        padding: 0;
      }
    }
  }
  .confirm-order-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .weui-dialog__bd {
      font-size: 17px;
      color: #000;
    }
    .weui-dialog__btn_default {
      color: #ff9600;
      background: #fff !important;
      border-top: 1px solid #f4f4f4;
    }
    .btn-close {
      position: absolute;
      left: 50%;
      bottom: -60px;
      width: 36px;
      height: 36px;
      margin-left: -18px;
      // background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .no-data {
    position: static;
  }

</style>
